import React, { useState, useEffect } from "react";
import { Outlet, useNavigate, useLocation } from "react-router-dom";
import { Layout, Menu, Breadcrumb, Avatar, Row, Col, Button, Spin } from "antd";
import {
  UserOutlined,
  ClusterOutlined,
  LogoutOutlined,
  RedditOutlined,
  SolutionOutlined,
  DollarOutlined,
  ProjectOutlined,
  BarChartOutlined,
} from "@ant-design/icons";
// import './manage.css'
import { getToken } from "../services/user";

export default function Manage() {
  const [loaded, setLoaded] = useState(false);
  let username;
  const [tokenState, setTokenstate] = useState("");
  const [slectedIt, setSlectedIt] = useState("sub0");
  const { Header, Content, Sider } = Layout;

  // 左侧数组
  const items = [
    { label: '用户管理', key: "/manage/users", icon: React.createElement(RedditOutlined) },
    { label: "类型管理", key: "/manage/types", icon: React.createElement(ClusterOutlined) },
    { label: "商品管理", key: "/manage/shops", icon: React.createElement(ProjectOutlined) },
    { label: "订单管理", key: "/manage/order", icon: React.createElement(DollarOutlined) },
    { label: "统计图表", key: "/manage/analysis", icon: React.createElement(BarChartOutlined) },
  ];
  // 设置跳转
  const navigate = useNavigate();
  // 获取当前路径
  const location = useLocation();
  // console.log(location.pathname);
  // 点击时可得到当前key即路由
  const handleKey = ({ key, }) => {
    // console.log(key, );
    // 点击时跳转当前点击的页面
    navigate(key);
  }

  const handel = async () => {
    let res = await getToken();
    console.log(res);
    setLoaded(true);
    username = res.data._id;
    setTokenstate(res.data.username);
  };
  useEffect(() => {
    if (!localStorage.token) {
      alert("请先登录！");
      navigate("/login");
    }
  }, [username]);
  handel();
  if (!loaded) {
    return (
      <div>
        <Spin size={50}></Spin>
      </div>
    );
  }
  return (
    <Layout>
      <Header className="header">
        <Row>
          <Col span={4}>
            <h1 style={{ color: "white" }}>用户管理系统</h1>
          </Col>
          <Col span={4} offset={16}>
            <span style={{ color: "white", marginRight: 10 }}>
              {tokenState}
            </span>
            <Avatar
              style={{ backgroundColor: "#87d068", marginRight: 10 }}
              icon={<UserOutlined />}
            />

            <Button
              type="primary"
              shape="circle"
              icon={<LogoutOutlined />}
              size={15}
              onClick={() => {
                localStorage.token = "";
                navigate("/login");
              }}
            />
          </Col>
        </Row>
      </Header>
      <Layout>
        <Sider width={200} className="site-layout-background">
          <Menu
            mode="inline"
            defaultSelectedKeys={[slectedIt]}
            style={{
              height: "100%",
              borderRight: 0,
            }}
            selectedKeys={
              (() => {
                // 如果是主页面，就默认选中学生管理系统
                if (location.pathname == '/manage') {
                  // console.log('/manage', location.pathname);
                  return location.pathname = '/manage/users'
                }
                // 不是就选中当前点击的
                else {
                  // console.log("sssss");
                  return location.pathname
                }
              }
              )()}
            onSelect={handleKey}
            items={items}
          />
        </Sider>
        <Layout
        >
          <Content
            className="site-layout-background"
            style={{
              padding: 24,
              margin: 0,
              minHeight: 280,
            }}
          >
            <Outlet />
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
}
